<template>
 <div>
 <van-nav-bar
  title="地图找房"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
  />
   <div id="container"></div>
     <van-popup v-model="showbottom"  position="bottom" :style="{ height: '30%' }" />
 </div>
</template>

<script>
import { areamap, listItem } from '@/api/listItem'
import { getTokenID } from '@/utils/stroageid'

// https://lbsyun.baidu.com/index.php?title=jspopularGL
// https://lbs.baidu.com/index.php?title=jspopularGL/guide/geoloaction
// https://lbs.baidu.com/index.php?title=jspopularGL/guide/helloworld
// https://lbs.baidu.com/index.php?title=jspopularGL/guide/label
export default {
  data () {
    return {
      maparr: [],
      showbottom: false
    }
  },
  mounted () {
    const { BMapGL } = window
    const map = new BMapGL.Map('container')
    // 创建地图实例
    const point = new BMapGL.Point(116.496175, 39.924648)
    // 创建点坐标
    map.centerAndZoom(point, 10)
    //
    const scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    const zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    const cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
    // const opts = {
    //   offset: new BMapGL.Size(100, 5)
    // }
    // // 添加控件
    // map.addControl(new BMapGL.ScaleControl(opts))
    areamap({ id: getTokenID() }).then(res => {
      this.maparr = res.body
      this.maparr.forEach(item => {
        const x = item.coord.latitude
        const y = item.coord.longitude
        //
        const setpoint1 = new BMapGL.Point(y, x)
        const label = new BMapGL.Label(`<span>${item.label}</span> <br> <span>${item.count}套</span>`, { // 创建文本标注
          position: setpoint1, // 设置标注的地理位置
          offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
        })
        map.addOverlay(label)
        label.setStyle({
          // 设置label的样式
          margin: 0,
          padding: 0,
          paddingTop: '10px',
          color: '#fff',
          fontSize: '10px',
          width: '50px',
          height: '50px',
          borderRadius: '50%',
          backgroundColor: '#20bb79',
          textAlign: 'center'
          // lineHeight: '5px'
        })
        // 点击
        label.addEventListener('click', function () {
          // alert('您点击了标注')
          const point = new BMapGL.Point(y, x)
          map.centerAndZoom(point, 13)
          areamap({ id: item.value }).then(res => {
            this.maparr = res.body
            this.maparr.forEach(item => {
              const x = item.coord.latitude
              const y = item.coord.longitude
              //
              const setpoint2 = new BMapGL.Point(y, x)
              const label1 = new BMapGL.Label(`<span>${item.label}</span> <br> <span>${item.count}套</span>`, { // 创建文本标注
                position: setpoint2, // 设置标注的地理位置
                offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
              })
              map.addOverlay(label1)
              label1.setStyle({ // 设置label的样式
                color: '#fff',
                fontSize: '14px',
                paddingTop: '10px',
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                backgroundColor: '#20bb79',
                textAlign: 'center'
                // lineHeight: '40px'
              })
              //
              label1.addEventListener('click', function () {
                // alert('您点击了标注')
                const point = new BMapGL.Point(y, x)
                map.centerAndZoom(point, 20)
                areamap({ id: item.value }).then(res => {
                  this.maparr = res.body
                  this.maparr.forEach(item => {
                    const x = item.coord.latitude
                    const y = item.coord.longitude
                    //
                    const setpoint3 = new BMapGL.Point(y, x)
                    const label2 = new BMapGL.Label(`${item.label}${item.count}套`, { // 创建文本标注
                      position: setpoint3, // 设置标注的地理位置
                      offset: new BMapGL.Size(10, 0) // 设置标注的偏移量
                    })
                    map.addOverlay(label2)
                    label2.setStyle({ // 设置label的样式
                      color: '#fff',
                      fontSize: '14px',
                      width: '100px',
                      // height: '40px',
                      // borderRadius: '50%',
                      backgroundColor: '#20bb79',
                      textAlign: 'center'
                      // lineHeight: '40px'

                    })
                    // <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
                    label2.addEventListener('click', function () {
                      listItem({ cityId: item.value }).then(res => {
                        this.showbottom = true
                      })
                    })
                  })
                })
              })
              //
            })
          })
        })
      })
    })
  }
}
</script>

<style>
#container{
  width: 100vw;
  height: 100vh;
}
</style>
